<template>
	<view style="background-color: #f1f1f1">
		<view class="st-detail-context">
			<view style="width: 100%; height: 30rpx;">
				
			</view>
			<textarea  v-model="article.stTitle" auto-height placeholder="有标题才能让更多人看见哦" style="height: 40rpx; line-height: 40rpx; margin-left: 20rpx;border-bottom: #f1f1f1f1 solid 2rpx;"/>
			<view class="cover-css" style="margin-left: 20rpx;">
				<view class="image-top">
					<text style="font-size: 26rpx; color: gray;">请选择封面</text>
				</view>
				<uni-file-picker 
					v-model="coverImg" 
					fileMediatype="image" 
					mode="grid" 
					:limit="1"
					@select="select1" 
					@progress="progress1" 
					@success="success1" 
					@fail="fail1" 
					:auto-upload="false"
				/>
			</view>
			
			<view class="image-top" style="margin-left: 20rpx;">
				<view style="margin-bottom: 10rpx;">
					<text style="font-size: 26rpx; color: gray;">请选择需要分享的图片(最多9张)</text>
				</view>
				<uni-file-picker
					v-model="imageValue" 
					fileMediatype="image" 
					mode="grid" 
					:limit="9"
					@select="select2" 
					@progress="progress2" 
					@success="success2" 
					@fail="fail2" 
					style="margin-bottom: 20rpx;"
				/>
			</view>
			
		
			
			<view id = "my-editor">
				
			</view>
			
			
		</view>
	
		<view class="st-detail-submit">
			<view class="fb" @click="toFb()">
				发布
			</view>
		</view>
	</view>
</template>

<script>
	import E from 'wangeditor'
	let editor = null
import image from '../../uni_modules/uview-ui/libs/config/props/image'
	export default {
		data() {
			return {
				
				imageValue:[],
				article:{
					stCoverImage:'',
					stTitle:null,
					detailImgs:[],
					context: '请填写内容',
				},
				coverImg:[]
			}
		},
		mounted(){
			
		},
		onReady() {
			
			this.initEditor()
		},
		onLoad(){
			
		},
		methods: {
			
			initEditor() {
				var _this = this
				editor = new E('#my-editor')
				editor.config.zIndex = 0
				editor.config.placeholder = '在这里写'
				
				editor.create()
				
			
			},
			
			select1(e){
			
				const temp = e.tempFilePaths[0]
				console.log("选择了封面")
				uni.uploadFile({
					url: 'http://localhost:7777/api/strategy/upload',
					filePath: temp,
					name:'file',
					header:{
						token: uni.getStorageSync('token')!=null? uni.getStorageSync('token'):' '
					},
					formData: {
						type:'stragety'
					},
					success: (res) => {
						const data = JSON.parse(res.data)
						console.log("返回的结果：",data)
						if(data.code == '1'){
							
							uni.showToast({
								title: '提交成功'
							});
							var x ={}
							x.url = data.data
							x.name = "11"
							x.extname=""
							this.coverImg.push(x)
							console.log(this.coverImg)
						
						}
					},
					fail(res){
						console.log(res)
						uni.showToast({
							title: '提交失败'
						});
					}
				})
				
				
				
			},
						// 获取上传进度
			progress1(e){
				console.log('上传进度：',e)
			},
						
						// 上传成功
			success1(e){
				console.log('上传成功')
			},
						
						// 上传失败
			fail1(e){
				console.log('上传失败：',e)
			},
			
			select2(e){
				const temp =e.tempFilePaths;
				
				for(var i = 0;i<temp.length;i++){
					this.loadImg(temp[i],i)
				}
				
			
			},
						// 获取上传进度
			progress2(e){
				console.log('上传进度：',e)
			},
						
						// 上传成功
			success2(e){
				console.log('上传成功')
				
			},
						
						// 上传失败
			fail2(e){
				console.log('上传失败：',e)
			},
			toFb(){
				console.log("封面",this.coverImg)
				console.log("内容图片",this.imageValue)
				this.article.context = editor.txt.html()
				console.log("文本内容：",this.article.context)
				this.article.stCoverImage = this.coverImg[0].url
				for(var i = 0;i<this.imageValue.length;i++){
					this.article.detailImgs.push(this.imageValue[i].url)
				}
				if(this.coverImg.length==0 || this.imageValue.length==0 || this.article.context==''||this.article.stTitle==null||this.article.context==null||this.article.stTitle==''){
					uni.showToast({
						title: '请填写完整',
						icon:'error'
					})
					return
				}
				else{
					this.request({
						url:"/strategy/add",
						method:'POST',
						data:this.article
					}).then(res=>{
						uni.showToast({
							title: '发布成功',
							icon:'success'
						})
						this.article = {}
						this.imageValue = []
						this.coverImg = []
						uni.navigateTo({
							url:"/pages/my-strategys/my-strategys"
						})
					})
				}
				
			},
			loadImg(path,index){
				uni.uploadFile({
					url: 'http://localhost:7777/api/strategy/upload',
					filePath: path,
					name:'file',
					header:{
						token: uni.getStorageSync('token')!=null? uni.getStorageSync('token'):' '
					},
					formData: {
						type:'view'
					},
					success: (res) => {
						const data = JSON.parse(res.data)
						console.log("返回的结果：",data)
						if(data.code == '1'){
							
							uni.showToast({
								title: '上传图片成功'
							});
							var x ={}
							x.url = data.data
							x.name = "imgvalue"+index
							x.extname=""
							this.imageValue.push(x)
						}
					},
					fail(res){
						console.log(res)
						uni.showToast({
							title: '提交失败'
						});
					}
				})
			}
			
			
		}
	}
</script>

<style scoped>
	@import url("../../utils/editor.css");
	.st-detail-context {
		width: 100%;
		background-color: #fff;
	}
	#editor {
		width: 100%;
		height: 300px;
		margin-top:10px;
	}
	.image-top {
		border-bottom: #f1f1f1f1 solid 2rpx;
		width: 100%;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}
	.st-detail-submit {
		position: fixed;
		width: 100%;
		bottom: 0rpx;
		background-color: #f1f1f1f1;
		display: flex;
		justify-content: center;
	}
	.fb{
		width: 200rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #18bc37;
		text-align: center;
		line-height: 60rpx;
		
		color: #fff;
	}
</style>
